<template>
  <div class="box">
    <div class="top">
      <p class="title">实时游客统计</p>
      <p class="bg"></p>
      <p class="right">可预约总量:<span>999999人</span></p>
    </div>
    <div class="number">
      <span v-for="(item,index) in people" :key="index">{{ item }}</span>
    </div>
    <!-- 盒子将来echarts展示图形图表的节点 -->
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script lang="ts" setup>
// 水球图拓展插件
import 'echarts-liquidfill'
import * as echarts from 'echarts'
import {ref,onMounted} from 'vue'
let people = ref('216908人')



//获取节点
let charts = ref()
onMounted(()=>{
  // 获取echarts类的实例
  let mycharts = echarts.init(charts.value)
  // 设置实例的配置项
  mycharts.setOption({
    // 标题组价
    title:{
      // text:"水球图"
    },
    // x|y轴组件
    xAxis:{},
    yAxis:{
      show:false,
    },
    // 系列：决定你展示什么样的图形
    series:{
      type:'liquidFill',  //系列
      data:[0.6,0.4,0.2], //展示的数据
      waveAnimation: true, //动画
      animationDuration: 3, 
      animationDurationUpdate: 0,
      radius:'100%',  //半径
      outline: {
        show: true,
        borderDistance: 8,
        itemStyle: {
            color: '#76BBD9',
            borderColor: '#294D99',
            borderWidth: 8,
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.25)'
        }
    },
    },
    // 布局组件
    grid:{
      left:0,
      right:0,
      top:0,
      bottom:0,
    }
  })
})
</script>

<style scoped lang="scss">
.box{
  background:url(../../images/dataScreen-main-lt.png) no-repeat;
  background-size:100% 100%;
  margin-top:10px;

  .top{
    .title{
      color:white;
      font-size:20px;
      // margin-top:10px;
    }
    .bg{
      width:68px;
      height:7px;
      background:url(../../images/dataScreen-title.png) no-repeat;
      background-size: 100% 100%;
      margin-top:10px;
    }
    .right{
      float:right;
      color:white;
      font-size:20px;
      margin-right:10px;
      span{
        color:yellowgreen;
      }
    }
  }
  .number{
    margin-top:30px;
    display:flex;
    padding:20px;
    span{
      flex:1;
      height:50px;
      display:block;
      text-align: center;
      line-height: 50px;
      background:url(../../images/total.png) no-repeat;
      background-size: 100% 100%;
      color:#29fcff;
      font-size:30px;
    } 
  }
  .charts{
      width:100%;
      height:220px;
    }
}
</style>